<!--商家管理-商家列表-->
<template>
  <div class="video-list-manage-parent" ref="parentContainer">
    <!--操作表单区域-->
    <div class="option-parent" ref="optionParentContainer">
      <el-row :gutter="0">
        <el-col :span="4">
          <el-select v-model="areaid" placeholder="商户分区" style="width: 100%">
            <el-option
              v-for="item in categoryData.agent_area_list"
              :key="item.areaid"
              :label="item.areaname"
              :value="item.areaid">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input v-model="sellername" placeholder="请输入商户名"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="sellersn" placeholder="请输入商户编号"></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="sellermobile" placeholder="请输入业主手机号"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="queryArticleByBtn()">查询</el-button>
          <el-button type="success" @click="openPage()">新增</el-button>
        </el-col>
      </el-row>
    </div>

    <!--数据表格区域-->
    <div v-bind:style="{height:tableHeight+'px',width:'100%'}" v-loading="loading">
      <el-table :data="articleData.agent_seller_list" border width="100%" height="100%">
        <el-table-column
          fixed
          prop="sellerid"
          label="商户ID"
          width="80">
        </el-table-column>
        <el-table-column
          label="添加时间"
          width="160">
          <template slot-scope="scope">
            <p>{{genTime(scope.row.dt0)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="areaname"
          label="所属分区"
          width="100">
        </el-table-column>
        <el-table-column
          label="状态"
          min-width="60">
          <template slot-scope="scope">
            <p>{{genSellerState(scope.row.seller_state)}}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="sellersn"
          label="商户编号"
          min-width="140">
        </el-table-column>
        <el-table-column
          prop="sellername"
          label="商户名称"
          min-width="160">
        </el-table-column>
        <el-table-column
          prop="sellertag"
          label="商户标签"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="selleraddress"
          label="店铺地址"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="sellerowner_realname"
          label="联系人"
          min-width="80">
        </el-table-column>
        <el-table-column
          prop="sellermobile"
          label="手机号"
          min-width="120">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除
            </el-button>
            <el-button
              v-show="!isSellerState(scope.row.seller_state)"
              size="mini"
              @click="lockSeller(scope.row)">锁定
            </el-button>
            <el-button
              v-show="isSellerState(scope.row.seller_state)"
              size="mini"
              type="success"
              @click="unlockSeller(scope.row)">解锁
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--翻页区域-->
    <div class="pagination-parent" ref="paginationParentContainer">
      <p class="pagination-parent-summary">商户总数:{{sellerSummaryData.total_sellers}}&nbsp;&nbsp;营业中的商户总数:{{sellerSummaryData.total_sellers_on}}</p>
      <el-pagination
        class="pagination-body"
        @current-change="handleCurrentChange"
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="articleData.rowcount">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import CPageBase from "../fragment/CPageBase"
  import CRootBase from "../fragment/CRootBase"

  export default {
    data() {
      return {
        pathArr: [
          {path: "/", name: "首页"},
          {path: "/container/seller_list", name: "商户列表"},
        ],
        start: 1,
        limit: 15,
        title: "",
        categoryId: "",
        articleData: "",
        categoryData: "",
        loading: false,

        areaid: "0",//分区id
        sellername: "",//商户名称
        sellersn: "",//商户号
        sellermobile: "",//业主手机号

        sellerSummaryData: ""
      }
    },
    watch: {
      "areaid": function () {
        this.queryArticleByBtn();
      }
    },
    mixins: [CPageBase, CRootBase],
    components: {},
    mounted() {

    },
    activated() {
      this.initCurrentPath();
      this.requestArticleData();
      this.requestCategoryData();
      this.requestAgentSellerSummary();
    },
    methods: {
      //初始化面包屑路径
      initCurrentPath() {
        this.$store.commit('changeCurrentLocation', this.pathArr);
      },

      //拼接图片地址
      genColumnImg(item) {
        return this.$utils.genImgURL(item.url);
      },

      //商家状态
      genSellerState(seller_state) {
        if (seller_state === "1") {
          return "锁定";
        }
      },

      //锁定和解锁状态
      isSellerState(seller_state) {
        if (seller_state === "1") {
          return true;
        } else {
          return false;
        }
      },

      //截取时间
      genTime(time) {
        return time.substring(0, time.length - 2);
      },

      //打开新增页面
      openPage() {
        this.$router.push("seller_add");
      },

      //打开编辑页
      handleEdit(item) {
        this.$router.push({path: 'seller_add', query: item});
      },

      //处理页面改变事件
      handleCurrentChange(currentPage) {
        this.start = currentPage;
        this.requestVideoInfos();
      },

      //点击查询按钮
      queryArticleByBtn() {
        this.start = 1;
        this.limit = 10;
        this.requestArticleData();
      },

      //获取商家列表
      requestArticleData() {
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_seller_list");
        parameter.append("areaid", this.areaid);
        parameter.append("sellername", this.sellername);
        parameter.append("sellersn", this.sellersn);
        parameter.append("sellermobile", this.sellermobile);
        parameter.append("pageno", this.start);
        parameter.append("pagesize", this.limit);
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.articleData = data;
        });
      },

      // 获取分区列表
      requestCategoryData() {
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_area_list");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          data.agent_area_list.unshift({areaid: "0", areaname: "全部"});
          that.categoryData = data;
        });
      },

      //获取统计信息
      requestAgentSellerSummary() {
        let parameter = new URLSearchParams();
        parameter.append("action", "agent_seller_summary");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.sellerSummaryData = data;
        });
      },

      //删除提示框
      handleDelete(item) {
        let that = this;
        this.$confirm('确认要删除该条记录吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parameter = new URLSearchParams();
          parameter.append("action", "agent_seller_delete");
          parameter.append("sellerid", item.sellerid);
          that.loading = true;
          this.$http.requestAuthData(that, parameter, function (data) {
            that.$message({type: 'success', message: '删除成功!'});
            that.requestArticleData();
          });
        }).catch(() => {
        });
      },

      //锁定商户
      lockSeller(item) {
        let that = this;
        this.$confirm('确认要锁定该商家吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parameter = new URLSearchParams();
          parameter.append("action", "agent_seller_lock");
          parameter.append("sellerid", item.sellerid);
          that.loading = true;
          this.$http.requestAuthData(that, parameter, function (data) {
            that.$message({type: 'success', message: '锁定成功!'});
            that.requestArticleData();
          });
        }).catch(() => {
        });
      },

      //解锁
      unlockSeller(item) {
        let that = this;
        this.$confirm('确认要解锁该商家吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parameter = new URLSearchParams();
          parameter.append("action", "agent_seller_unlock");
          parameter.append("sellerid", item.sellerid);
          that.loading = true;
          this.$http.requestAuthData(that, parameter, function (data) {
            that.$message({type: 'success', message: '解锁成功!'});
            that.requestArticleData();
          });
        }).catch(() => {
        });
      }
    }
  }
</script>

<style lang="scss" scoped="" type="text/scss" src="../../assets/style/list-type-pages.scss">

</style>

